<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
   
    <title>Document</title>
   
    <style>
     .mask{
         width: 100%;
         height: 100%;
         position: fixed;
         left: 0;
         top: 0;
         background-color: rgba(0,0,0,.3) 
     }
     .mask .content{
         width: 400px;
         height: 420px;
         background-color: white;
         position: absolute;
         left: 50%;
         top: 50%;
         margin-left: -200px;
         margin-top: -200px;
         z-index: 1000;
     }
     .mask .close{
         display: inline-block;
         width: 30px;
         height: 30px;
         background-color: rgba(0,0,0,.2);
         position: absolute;
         right: 10px;
         top: 10px;
         cursor: pointer;
         border-radius: 50%;
         color: white
         ;text-align: center;
         line-height: 27px;
         font-size: 20px
         
     }
     .mask .content .title{
         width: 100%;
         height: 40px;
         border-bottom: 1px solid #e5e5e5
     }
     .mask .content div{
         width: 300px;
         /* padding-bottom: 20px; */
         margin: 0 auto
     }
     .mask .content #ewm{
         width: 200px;
         height: 200px;
         /* margin-left: 50px */
     }
     .mask .print{
         width: 80px;
         height: 35px;
         border: none;
         background-color: rgba(25, 158, 216, 1);
         line-height: 35px;
         text-align: center;
         font-size: 14px;
         border-radius: 5px;
         color: white;
         position: absolute;
         right: 10px;
         bottom: 10px
     }
     canvas{
         background-color: white;
     }
     .none{
        display: none
     }
    </style>
</head>
<body>
  <button id="pCode">打印编码</button>  
  <div class="mask none">
        <div class="content" > 
           <p class="title"><span class="close">x</span></p> 
           <div id="content" style="background-color: white;padding: 20px;box-sizing: border-box">
               <div id="ewm"></div>
               <p style="width: 300px;margin-left: 30px">货位编码：<span>6666</span></p>
               <p style="width: 300px;margin-left: 30px">货位名称：<span>多谷果子专用</span></p>
           </div>
           <button class="print" id="Download">保存</button>
        </div> 
        <div id="images" class="none" crossOrigin='anonymous'></div>    
  </div>
  <script src="jquery-1.10.2.min.js"></script>
  <script src="jquery.qrcode.min.js"></script>
  <script src="canvas2image.js"></script>
  <script src="html2canvas.min.js" ></script>
  <script src="base64.js"></script>
  <script>
      //点击生成二维码
      var content = document.getElementById("content");

      $('#pCode').on('click',function(){
          $('#ewm').html("");
          $('.mask').removeClass('none')
          jQuery('#ewm').qrcode({
                render: "canvas",
                width: 200,
                height: 200,
                text: "http://192.168.10.117/shoppingCart.html"
            });	

            html2canvas(content, {
            onrendered: function(canvas) {
                //添加属性
                canvas.setAttribute('id','thecanvas');
                //读取属性值
                // var value= canvas.getAttribute('id');
                document.getElementById('images').appendChild(canvas);
            },
            useCORS: true
        }); 
      })
      //关闭弹框
      $('.close').on('click',function(){
        $('.mask').addClass('none')
      })

      //div转为图片  
    var Download = document.getElementById("Download");     
    Download.onclick=function(){
        var oCanvas = document.getElementById("thecanvas");  
        // oCanvas.scale(2, 2)  
        var img_data1 = Canvas2Image.saveAsPNG(oCanvas, true).getAttribute('src');
        saveFile(img_data1, 'abc');
    }
    //下载到本地
    var saveFile = function(data, filename){
        // debugger
        var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
        save_link.href = data;
        save_link.download = filename;    
        var event = document.createEvent('MouseEvents');
        event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
        save_link.dispatchEvent(event);
    };

  </script>
</body>
</html>